<template>
  <view class="yao-gua-wrapper" v-if="isShowMsg == 'Y'">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />

    <tui-list-view title="基本信息">
      <tui-list-cell>
        <text class="left">卦名：</text>
        <text>{{dataInfo.commonDesc1}}</text>
      </tui-list-cell>

      <tui-list-cell>
        <text class="left">象曰：</text>
        <text>{{dataInfo.commonDesc2}}</text>
      </tui-list-cell>

      <tui-list-cell>
        <text class="left">解卦：</text>
        <text>{{dataInfo.commonDesc3}}</text>
      </tui-list-cell>
    </tui-list-view>

    <tui-list-view title="解卦信息" style="margin-top:10px">
      <tui-list-cell>
        <text class="left">事业</text>
        <text>{{dataInfo.commonDesc1}}</text>
      </tui-list-cell>

      <tui-list-cell>
        <text class="left">经商：</text>
        <text>{{dataInfo.jingshang}}</text>
      </tui-list-cell>

      <tui-list-cell>
        <text class="left">求名：</text>
        <text>{{dataInfo.qiuming}}</text>
      </tui-list-cell>

      <tui-list-cell>
        <text class="left">外出：</text>
        <text>{{dataInfo.waichu}}</text>
      </tui-list-cell>

      <tui-list-cell>
        <text class="left">婚恋：</text>
        <text>{{dataInfo.hunlian}}</text>
      </tui-list-cell>

      <tui-list-cell>
        <text class="left">决策：</text>
        <text>{{dataInfo.juece}}</text>
      </tui-list-cell>
    </tui-list-view>
  </view>
</template>

<script>
import { yfgyaoguaApi } from "@/apis/qiuqian";
import showPage from '@/utils/showPage'

export default {
  mixins: [showPage],

  data() {
    return {
      dataInfo: {}
    };
  },
  onLoad() {
    this.init();
  },
  methods: {
    async init() {
      let { code, data } = await yfgyaoguaApi({
        yaogua_id: this.getRandomInt(1, 64)
      });
      if (code == 1) {
        this.dataInfo = data;
      }
    },
    getRandomInt(min, max) {
      min = Math.ceil(min); // 确保最小值是整数
      max = Math.floor(max); // 确保最大值是整数
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  }
};
</script>

<style lang="scss">
.yao-gua-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  position: relative;
  // overflow: hidden;
  padding: 12px;
  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .left {
    color: #888;
    margin-right: 6px;
  }
}
</style>